<script setup lang="ts">
import { ref } from 'vue';
import Appraise from './components/appraise.vue';
import Header from './header/header.vue';
import { createRouter, createMemoryHistory } from "vue-router";


const keyword = ref('');

// 创建一个函数方法 获取搜索框内的值
const handleSearch = (value: string) => {
  // console.log(keyword.value, value);
  keyword.value = value;
  // 用户每输入一次 就在控制台打印一次
  console.log(keyword.value);
  return keyword.value
}
</script>

<template>
  <div class="father">
    <!-- v-model 传入了一个响应式空字符串 这里获取到字传过来的事件名称 返回给子函数方法handleSearch -->
    <Header v-model="keyword" @search="handleSearch" />
    <div class="bar">
      <Appraise :keyword="keyword" />
    </div>
  </div>
</template>

<style scoped>
* {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.father {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bar {
  width: 100%;
  height: calc(100% - 54px);
}
</style>
